<script setup>
    import Add from '../../globalCompoents/Add.vue';
    import Collection from '../../globalCompoents/Collection.vue';
    import Forward from '../../globalCompoents/Forward.vue';
    import Download from '../../globalCompoents/Download.vue';
    import { getCurrentInstance, ref, watch, inject } from 'vue';
    const axios = getCurrentInstance().proxy.$http;

    import { useRoute, useRouter } from 'vue-router';
    const route = useRoute();
    const router = useRouter();

    import { computedPlayTime } from '../../../tools/play.js'
    const toplistDetail = ref();
    const getToplistData = async id => {
        toplistDetail.value = '';
        let { data } = await axios.get(`/playlist/detail?id=${id}`);
        toplistDetail.value = data.playlist;
    }


    let id = ref();
    let updateTime = ref();
    watch(route, (newValue) => {
        if(newValue.path === '/discover/listRanking/detail') {
            getToplistData(newValue.query.id);
            id.value = newValue.query.id;
            updateTime.value = newValue.params.updateTime;
        }
    }, {
        immediate: true
    })

    const toSong = (id) => {
        router.push({ name: 'song', query: {id}})
    }


    // 播放
    const emitter = inject('emitter');
    const play = async (id) => {
        emitter.emit('play', id);
    }

</script>

<template>
    <aside v-if="toplistDetail">
        <header>
            <div class="left">
                <img :src="toplistDetail?.coverImgUrl">
            </div>
            <div class="right">
                <p>{{  toplistDetail?.name }}</p>
                <span>({{updateTime}})</span>
                <Fun :id="id"></Fun>
            </div>
        </header>
        <div class="list">
            <div class="title">
                <div class="title-left">
                    <span>歌曲列表</span>
                    <span>{{toplistDetail.tracks.length}}首</span>
                </div>
                <div class="title-right">
                    <span>播放:</span>
                    <span><span>{{toplistDetail.playCount}}</span>次</span>
                </div>
            </div>
            <div class="header">
                <div></div>
                <div>标题</div>
                <div>时长</div>
                <div>歌手</div>
            </div>
            <ul class="table">
                <li
                    v-for="(item, index) of toplistDetail.tracks" 
                    :key="index"
                >
                    <div>{{index+1}}</div>
                    <div>
                        <el-icon @click="play(item.id)"><video-play /></el-icon>
                        <span @click="toSong(item.id)">{{item.name}}</span>
                    </div>
                    <div class="time">
                        <span>{{computedPlayTime(item.dt)}}</span>
                        <div class="minfun">
                            <Add
                                :id="item.id"
                                :songName="item.name"
                                :singerList="item.ar"
                                :duration="item.dt"
                            ></Add>
                            <Collection></Collection>
                            <Forward></Forward>
                            <Download
                                :id="item.id"
                                :songName="item.name"
                            ></Download>
                        </div>
                    </div>
                    <div>
                        <template
                            v-for="(value, index) of item.ar"
                            :key="value"
                        >
                            <span v-if="index != 0">/</span>
                            <span>{{value.name}}</span>
                        </template>
                    </div>
                </li>
            </ul>
        </div>
    </aside>
    <div class="loading" v-else>
        <loading></loading>
    </div>
</template>

<style lang='less' scoped>
    aside{
        flex-grow: 1;
        padding: 50px 30px;
        header{
            display: flex;
            margin-bottom: 30px;
            .left{
                border: 1px solid #ccc;
                margin-right: 30px;
                width: 156px;
                height: 156px;
                padding: 4px;
                img{
                    width: 100%;
                    height: 100%;
                }
            }
            .right{
                p{
                    font-size: 20px;
                    margin-top: 15px;
                }
                span{
                    display: block;
                    font-size: 12px;
                    color: #999;
                    margin: 10px 0px;
                }
            }
        }

        .list{
            .title{
                display: flex;
                height: 40px;
                border-bottom: 3px solid #c20c0c;
                line-height: 45px;
                .title-left{
                    span{
                        &:nth-child(1) {
                            font-size: 20px;
                            margin-right: 20px;
                        }
                        &:nth-child(2) {
                            font-size: 10px;
                        }
                    }
                }
                .title-right{
                    margin-left: auto;
                    span{
                        &:nth-child(1) {
                            font-size: 12px;
                            margin-right: 5px;
                        }
                        &:nth-child(2) {
                            font-size: 12px;
                            span{
                                color: #c20c0c;
                                margin-right: 0px;
                            }
                        }
                    }
                }
            }
            .header{
                box-sizing: border-box;
                height: 35px;
                border: 1px solid #ccc;
                line-height: 35px;
                display: flex;
                background: linear-gradient(to bottom, rgb(240, 239, 239), rgb(226, 224, 224), rgb(241, 240, 240));
                user-select: none;
                div{
                    height: 100%;
                    border-right: 1px solid #ccc;
                    font-size: 12px;
                    padding: 0px 10px;
                    color: #555;
                    &:nth-child(1) {
                        width: 7%;
                    }
                    &:nth-child(2) {
                        flex-grow: 1;
                    }
                    &:nth-child(3) {
                        width: 18%;
                    }
                    &:nth-child(4) {
                        width: 20%;
                        border-right: none;
                    }
                }
            }
            .table{
                border: 1px solid #ccc;
                border-top: none;
                box-sizing: border-box;
                li{
                    height: 35px;
                    display: flex;
                    width: 100%;
                    line-height: 35px;
                    &:hover{
                        .time{
                            span{
                                display: none;
                            }
                            .minfun{
                                display: block;
                                padding: 0px!important;
                                div{
                                    &:nth-child(1) {
                                        margin-left: 13px;
                                    }
                                    margin-top: 6px;
                                    float: left;
                                    margin-left: 3px;
                                }
                            }
                        }
                    }
                    &:nth-child(2n+1) {
                        background: rgba(180, 180, 180, 0.1);
                    }
                    div{
                        height: 100%;
                        font-size: 12px;
                        padding: 0px 10px;
                        color: #555;
                        &:nth-child(1) {
                            width: 7%;
                        }
                        &:nth-child(2) {
                            flex-grow: 1;
                            display: flex;
                            align-items: center;
                            user-select: none;
                            .el-icon{
                                font-size: 17px;
                                margin-right: 10px;
                                color: #999;
                                cursor: pointer;
                                &:hover{
                                    color: #555;
                                }
                            }
                            span{
                                cursor: pointer;
                                display: block;
                                width: 250px;
                                height: 100%;
                                white-space: nowrap;  
                                overflow: hidden;  
                                text-overflow: ellipsis;
                                &:hover{
                                    text-decoration: underline;
                                }
                            }
                        }
                        &:nth-child(3) {
                            width: 18%;
                            .minfun{
                                transform: translateX(-20px);
                                display: none;
                            }
                        }
                        &:nth-child(4) {
                            width: 20%;
                            border-right: none;
                            white-space: normal;
                            overflow: hidden;
                            text-overflow: ellipsis;
                        }
                        
                    }
                }
            }
        }
    }

    .loading{
        margin: 100px auto;
    }
</style>